<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { usePlantListLocation, usePlantListBreed } from '@/simba/hooks/plant'
	import {useLocationBreed, useLocationTabs, 
		useBreedTabs } from '@/simba/hooks/locationBreed'
	const choosedLocBreed = ref(0)
	// import SimbaTabs from '../components/SimbaTabs/SimbaTabs.vue';
	const { listLocBreedType, onNavLocBreedEditHandler } = useLocationBreed()
	
	function onLocBreedChooseChange(locBreedIndex: number) {  
		choosedLocBreed.value = locBreedIndex
		//根据位置/品种获取植物列表
	}
	const { locationTabs, locationTabRef, onGetLocationDataHandler//, onAddLocationHandler 
	} = useLocationTabs()
	const { breedTabs, breedTabRef, onGetBreedDataHandler//, onAddBreedHandler 
	} = useBreedTabs()
	
	//获取位置植物列表
	// import SimbaPlantListLB from "../components/SimbaPlantListLB/SimbaPlantListLB.vue"
	
	
	const { listPlantLocation, onGetPlantListLocation,
		onConserveLocationHandler, onStatusLocationHandler, onGrowRecordLocationHandler } = usePlantListLocation()
	
	//获取品种植物列表
	const { listPlantBreed, onGetPlantListBreed,
		onConserveBreedHandler, onStatusBreedHandler, onGrowRecordBreedHandler } = usePlantListBreed()
	
	onLoad(async()=>{
		await Promise.all([
			onGetLocationDataHandler(),
			onGetBreedDataHandler(),
			onGetPlantListLocation(),
			onGetPlantListBreed()
		])
	})
	import type { ITabsItem } from '@/simba/types';
	const onTabsClickHandler = (item: ITabsItem) => {
		console.log('----', listLocBreedType[choosedLocBreed.value].name)
		//根据用户的位置过滤植物列表
		// uni.showToast({
		// 	icon: 'none',
		// 	title: item.id +  item.name
		// })
	}
</script>

<template>
	<!-- <s-layout
	  title="植物"
	  navbar="custom"
	  tabbar="/pages/index/plant"
	  :showTabbar="false"
	> -->

		<view class="content-sub">
			<up-subsection style="width: 100%;" :list="listLocBreedType" :current="0" mode="subsection" @change="onLocBreedChooseChange"></up-subsection>
		</view>
		<view class="content">
			<scroll-view class="viewport">
				<view class="location" v-if="choosedLocBreed===0">
					<siTabs ref="locationTabRef"
						:list="locationTabs.list" 
						:choosedTab="locationTabs.choosedTab"
						@onTabsClick="onTabsClickHandler">
						<template #content>
							<up-button type="primary" size="mini" :plain="true" @click="onNavLocBreedEditHandler(choosedLocBreed)">
								<up-icon name="plus"></up-icon>
							</up-button>
						</template>
					</siTabs>
					<up-divider :hairline="true"></up-divider>
					<view class="plant-container">
						<view class="plant-item" v-if="locationTabRef?.choosedTab.name === '全部'">
							<siPlantListLB class="plant-list" :list="listPlantLocation">
								<template #ItemOp="{obj}">
									<view class="solt-op">
										<u-button class="solt-op-but" type="primary" size="mini" :plain="true" @click="onConserveLocationHandler(obj)">养护</u-button>
										<u-button class="solt-op-but" type="primary" size="mini" :plain="true" @click="onStatusLocationHandler(obj)">状态</u-button>
										<u-button class="solt-op-but" type="primary" size="mini" :plain="true" @click="onGrowRecordLocationHandler(obj)">生长日记</u-button>
									</view>
								</template>
							</siPlantListLB>
						</view>
						<view class="plant-item" v-else-if="locationTabRef?.choosedTab.name === '户外'">
							户外植物
						</view>
						<view class="plant-item" v-else-if="locationTabRef?.choosedTab.id === 2">
							阳台植物
						</view>
						<view v-else>选择错误</view>
					</view>
					
				</view>
				<view class="location" v-if="choosedLocBreed===1">
					<siTabs ref="breedTabRef" 
						:list="breedTabs.list" 
						:choosedTab="breedTabs.choosedTab">
						<template #content>
							<u-button type="primary" size="mini" :plain="true" @click="onNavLocBreedEditHandler(choosedLocBreed)">
								<up-icon name="plus"></up-icon>
							</u-button>
						</template>
					</siTabs>
					<up-divider :hairline="true"></up-divider>
					<view class="plant-container">
						<view class="plant-item" v-if="breedTabRef?.choosedTab.name === '全部'">
							<siPlantListLB class="plant-list" :list="listPlantBreed">
								<template #ItemOp="{obj}">
									<view class="solt-op">
										<u-button class="solt-op-but" type="primary" size="mini" :plain="true" @click="onConserveBreedHandler(obj)">养护</u-button>
										<u-button class="solt-op-but" type="primary" size="mini" :plain="true" @click="onStatusBreedHandler(obj)">状态</u-button>
										<u-button class="solt-op-but" type="primary" size="mini" :plain="true" @click="onGrowRecordBreedHandler(obj)">生长日记</u-button>
									</view>
								</template>
							</siPlantListLB>
						</view>
						<view class="plant-item" v-else-if="breedTabRef?.choosedTab.name === '品种1'">
							品种1植物
						</view>
						<view class="plant-item" v-else-if="breedTabRef?.choosedTab.name === '品种2'">
							品种2植物
						</view>
						<view v-else>选择错误</view>
					</view>
					<!-- <view class="locationManage">
						<up-tabs :list="varietyList" @click="onVarietyTabsClickHandler"></up-tabs>
						<view>
							<up-button type="primary"  size="mini" icon="plus" :plain="true" text="" click="onAddVarietyHandler"></up-button>
						</view>
					</view> -->
					<!-- <up-divider :hairline="true"></up-divider>
					<!-- <view v-for="(item, index) in listPlant" :key="index">
						<view class="listItem">
							<view class="detail">
								<up-image :show-loading="true" :src="item.url" radius= 10 width="100rpx" height="100rpx"></up-image>
								<view style="width: 100%;">
									<span>{{item.name}}</span>
								</view>
							</view>
							<view class="operation">
								<up-button type="primary"  size="mini" :plain="true" text="养护" @click="onConservePlantHandler"></up-button>
								<up-button type="primary"  size="mini" :plain="true" text="状态" click="onAddPlantHandler"></up-button>
								<up-button type="primary"  size="mini" :plain="true" text="生长记录" click="onAddPlantHandler"></up-button>
							</view>
						</view>
						<up-divider :hairline="true"></up-divider>
					</view> -->
				</view>
			</scroll-view>
		</view>
	<!-- </s-layout> -->
</template>

<style lang="scss" scoped>
	.content-sub{
		background-color: #ffffff;
		margin-top: 8rpx;
	}
	.content{
		margin: 15rpx 8rpx 0 8rpx;
	}
	.viewport{
		width: auto;
		// border: 1rpx red solid;
		.location{
			display: flex; 
			flex-direction: column; 
			justify-content: space-between; 
			// align-items: center;
			background-color: #ffffff;
			margin: 0rpx 2rpx 2rpx 0rpx;
			// border: 1rpx red solid;
		}
		.plant-container{
			height: auto;
			// width: 100%;
			background-color: #ffffff;
			margin-top: 5rpx;
			display: flex; 
			align-items: center;
			// border: 1rpx red solid;
			.plant-item{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				// border: 1rpx blue solid;
				
			}
		}
		.plant-list{
			width: 100%;
			.solt-op{
				display: flex; 
				flex-direction: row;
				.solt-op-but{
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
